<template>
    <div class="order">
        <!-- 订单详情 -->
        <goods-banner></goods-banner>
        <div class="order_top">
            <!-- <img  alt=""    /> -->
            <van-image
                    fit="cover"
                    round
                    class="order_top_left"
                    :src="seller.head_img_url"
                    @click="prompt = true"
                    style="border-radius: 50%;"
            >
                <template v-slot:loading>
                    <img src="@/assets/images/goodsDetails/default_img.png" alt="">
                </template>
            </van-image>
            <div class="order_top_content" @click="prompt = true">
                <span>{{ seller.nickname }}</span>
                <div class="order_top_content_con">
                    <span>个人主页</span>
                    <img src="../../assets/images/pubilc/right2.png" alt=""/>
                </div>
            </div>
            <div class="order_top_right" @click="showService">
                <!-- <img src="../../assets/images/pubilc/er.png" alt="" /> -->
                <span>服务中心</span>
            </div>
        </div>
        <div class="orderInfo">
            <div class="box">
                <div class="left">
                    <van-image
                            fit="cover"
                            class="left_img"
                            width="2rem"
                            height="2rem"
                            :src="order_detail.goods_cover"
                            @click="goback"
                            radius="4"
                    >
                        <template v-slot:loading>
                            <img src="@/assets/images/goodsDetails/serpeImg.png" alt="">
                        </template>
                    </van-image>
                </div>
                <div class="right">
                    <div class="info">
                        {{ order_detail.goods_name }}
                    </div>
                    <div class="desc">
                        {{ order_detail.goods_spec_name }}
                    </div>
                    <div class="pirce">
                        实付：¥<span class="money">{{ detail.pay_price }}</span
                    ><span style="color: #999999"
                    >{{ detail.buy_count + detail.give_count }}件</span
                    >
                    </div>
                </div>
            </div>
            <div class="explain">
                <div class="title">
                    使用说明
                </div>
                <div :class="all ? 'content' : 'conten'">
                    <!-- <div class="content"> -->
                    <div class="infoo" ref="infoo" style="white-space: pre-wrap">{{ spec.instruction ? spec.instruction
                        : spec.goods_media.length === 0 ? '卖家未添加使用说明，如使用过程中遇到问题，请咨询卖家。' : '卖家仅提供图片使用说明，请展开查看！'}}
                    </div>
                    <div class="picture" v-if="spec.goods_media.length !== 0"
                         :style="{height: all ? '0px' : '2.93333rem'}">
                        <van-image
                                fit="cover"
                                :style="{display: all ? 'none' : ''}"
                                v-for="(item, index) in spec.goods_media"
                                :key="index"
                                class="infoo_img"
                                width="2.93333rem"
                                height="2.93333rem"
                                :src="item.url"
                                radius="4"
                                @click="getImg(index)"
                        />
                    </div>
                </div>
                <div class="more" @click="findAll" v-if="nomore">
                    {{ all ? '查看全部' : '收起'}}
                    <img :class="all ? '' : 'rote'" src="../../assets/images/pubilc/down.png" alt="">
                </div>
            </div>
        </div>
        <div class="cardClose">
            <div class="title">
                <span>您购买的卡密({{ allCardNum }}条) </span>
                <span @click="copeAll" class="copy" v-if="detail.delivery_status !== 2 && type == 1"
                      :order_delivery="order_delivery"> <van-button color="#FFDD07" class="copyBtn">复制全部卡密</van-button></span>
            </div>

            <div class="center">
                <!-- 手动发货 -->
                <NotAuto v-if="detail.delivery_type !== 2"/>
                <div v-if="detail.delivery_type === 2">
                    <!-- 自动未发货 -->
                    <Autoing v-if="detail.delivery_status == 2"/>
                    <div v-if="detail.delivery_status !== 2">
                        <!-- 订单卡密无需下载 -->
                        <AutoedNum v-if="type == 1" :order_delivery="order_delivery"/>
                        <!-- 订单卡密需下载 -->
                        <AutoedTxt v-if="type == 2" :order_delivery="order_delivery"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="orderNum">
            <div class="title">
                订单信息
            </div>
            <ul>
                <li>
                    <div class="left">
                        订单编号
                    </div>
                    <div class="right">
                        {{ detail.order_num }}
                    </div>
                </li>
                <li>
                    <div class="left">
                        支付方式
                    </div>
                    <div class="right">
                        {{ detail.channel_name }}
                    </div>
                </li>
                <li>
                    <div class="left">
                        支付时间
                    </div>
                    <div class="right">
                        {{ detail.pay_time }}
                    </div>
                </li>
            </ul>
        </div>
        <div></div>

        <!-- 客服中心 弹窗 -->
        <van-popup v-model="service">
            <div class="service_center">
                <img src="../../assets/images/pubilc/客服中心@2x.png" alt=""/>
                <div class="customer">
                    <p>
                        <span>平台客服</span>
                        <span class="public">关注QQ公众号：<i>800822399</i></span>
                    </p>
                    <a class="consult" id="consult" target="_blank"
                       href="https://url.cn/pdRMoBU8?_type=wpa&qidian=true">咨询客服</a>
                </div>
                <div class="center" @click="showSeller">
                    <p>
                        <span>联系卖家</span>
                        <span class="public"
                        >请勿通过第三方聊天工具联系卖家</span
                        >
                    </p>
                    <img src="../../assets/images/pubilc/right2.png" alt=""/>
                </div>
                <div class="center" @click="showSale">
                    <p>
                        <span>申请售后</span>
                        <span class="public">请下载APP申请售后</span>
                    </p>
                    <img src="../../assets/images/pubilc/right2.png" alt=""/>
                </div>
            </div>
        </van-popup>
        <div class="clone">
            <van-popup v-model="prompt" position="bottom">
                <goods-download @closeprompt="toPrompt"></goods-download>
            </van-popup>
        </div>
    </div>
</template>

<script>
  import NotAuto from "@/components/orderDetail/notAuto";
  import Autoing from "@/components/orderDetail/autoing";
  import AutoedNum from "@/components/orderDetail/autoedNum";
  import AutoedTxt from "@/components/orderDetail/autoedTxt";
  import {getOrderDetail} from "@/api/index";
  import GoodsBanner from "../../components/goodsDetails/goodsBanner";
  import GoodsDownload from "../../components/goodsBounced/goodsDownload"; //提示下载app
  import {Toast} from 'vant';
  import Clipboard from 'clipboard'
  import {
    ImagePreview
  } from "vant";

  export default {
    data() {
      return {
        copyText: '',
        num: 3,
        detail: {},
        order_detail: {},
        seller: {},
        spec: {
          goods_media: []
        },
        order_delivery: [],
        timer: null,
        service: false,
        type: null,
        all: false,
        prompt: false, //下载app
        hour: '',
        minute: '',
        imagss: [],
        nomore: false,
        firest: 1,
        allCardNum: 0,
        loadingObj: {}
      }
    },
    components: {
      NotAuto,
      Autoing,
      AutoedNum,
      AutoedTxt,
      GoodsBanner,
      GoodsDownload,
    },
    created() {
      this.loadingObj = Toast.loading({
        duration: 10000,
        message: '加载中'
      })
      let url = this.$route.query.url
      this.getData(url)
      this.timer = setInterval(() => {
        this.getData(url)
      }, 5000);

    },
    destroyed() {
      clearInterval(this.timer)
    },
    updated() {
      if (this.firest === 1) {
        this.firest = 0
        if (this.$refs.infoo.clientHeight <= 38 && this.spec.goods_media.length === 0) {
          this.nomore = false
        } else {
          this.nomore = true
          this.all = true
        }
      }
    },
    computed: {
      hei() {
        return this.$refs.infoo.clientHeight
      }
    },
    methods: {
      goback() {
        this.$router.go(-1)
      },
      getImg(i) {
        ImagePreview({
          images: this.imagss,
          showIndex: true,
          loop: true,
          startPosition: i
        });
      },
      copeAll() {
        var clipboard = new Clipboard('.copy', {
          text: () => {
            return this.copyText;
          }
        })
        clipboard.on('success', e => {
          Toast('复制成功')
          // 释放内存
          clipboard.destroy()
        })
        clipboard.on('error', e => {
          // 不支持复制
          Toast('该浏览器不支持自动复制，请手动选择复制。')
          // 释放内存
          clipboard.destroy()
        })
      },
      goback() {
        this.$router.go(-1)
      },
      findAll() {
        this.all = !this.all
      },
      getData(url) {
        getOrderDetail(url).then(res => {
          this.loadingObj.clear()
          this.detail = res.data
          // console.log(this.detail)
          let listNum = []
          this.order_detail = this.detail.order_detail
          this.seller = this.detail.buyer
          this.spec = this.detail.spec
          this.order_delivery = this.detail.order_delivery
          this.imagss = this.spec.goods_media.map(item => {
            return item.url
          })
          if (this.order_delivery.length !== 0) {
            this.type = this.detail.order_delivery[0].card_content_type
            this.order_delivery.filter((item, index) => {
              let a = 0
              a = item.delivery_count + a
              this.allCardNum = a
              if (item.card_content_type === 1) {
                item.card_no_name = this.detail.spec.card_no_name
                item.card_pwd_name = this.detail.spec.card_pwd_name
                item.card_content = JSON.parse(item.card_content)
                listNum = listNum.concat(item.card_content)
                if (index === 0) {
                  this.copyText += "订单号：" + this.detail.order_num + '\r\n\r\n'
                } else {
                  // this.copyText = this.copyText + "补发\r\n"
                }

                item.card_content.forEach(i => {
                  this.copyText = this.copyText + (item.card_no_name ? item.card_no_name + '：' : '卡号：' + "") + i.no + "\r\n" + (item.card_pwd_name ? item.card_pwd_name + '：' : '卡密：') + i.pwd + "\r\n\r\n"
                })
              } else {
                item.card_file_size = this.conver(item.card_file_size)
              }
              // console.log(index)
            })
            listNum.forEach((item, index) => {
              item.num = (index + 1) < 10 ? '0' + (index + 1) : index + 1
            })

            // console.log(listNum)
          }
          // console.log(this.order_delivery)
          if (res.data.delivery_status === 1) {
            clearInterval(this.timer)
          }
          if (res.data.delivery_type === 1) {
            clearInterval(this.timer)
          }

          if (!this.detail.auto_receipt_remain) {
            return false
          } else {
            let day = Math.floor(this.detail.auto_receipt_remain / (24 * 3600))
            this.hour = Math.floor((this.detail.auto_receipt_remain - day * 24 * 3600) / 3600)
            this.minute = Math.floor((this.detail.auto_receipt_remain - day * 24 * 3600 - this.hour * 3600) / 60)

          }
        })
      },
      conver(limit) {
        var size = "";
        if (limit < 0.1 * 1024) { //如果小于0.1KB转化成B
          size = limit.toFixed(2) + "B";
        } else if (limit < 0.1 * 1024 * 1024) {//如果小于0.1MB转化成KB
          size = (limit / 1024).toFixed(2) + "KB";
        } else if (limit < 0.1 * 1024 * 1024 * 1024) { //如果小于0.1GB转化成MB
          size = (limit / (1024 * 1024)).toFixed(2) + "MB";
        } else { //其他转化成GB
          size = (limit / (1024 * 1024 * 1024)).toFixed(2) + "GB";
        }

        var sizestr = size + "";
        var len = sizestr.indexOf("\.");
        var dec = sizestr.substr(len + 1, 2);
        if (dec == "00") {//当小数点后为00时 去掉小数部分
          return sizestr.substring(0, len) + sizestr.substr(len + 3, 2);
        }
        return sizestr;
      },
      showService() {
        this.service = true;
      },
      showSeller() {
        this.prompt = true;
        this.service = false;
      },
      toPrompt(prompt) {
        this.prompt = prompt;
      },
      //申请售后
      showSale() {
        if (this.detail.order_status == 2 || this.detail.order_status == 3) {
          this.prompt = true;
          this.service = false
        } else {
          return false
        }

      }
    }
  };
</script>
<style lang="scss">
    .van-popup--center {
        border-radius: 8px;
    }

    .clone {
        .van-popup {
            background: unset; //没有继承属性 显示默认的
        }
    }
</style>
<style lang="scss" scoped>
    .order {
        header {
            background: #fff;
            height: 42px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 5;

            img {
                height: 16px;
                width: 16px;
                margin-left: 15px;
            }

            span {
                margin-right: 154px;
                font-size: 17px;
                color: rgba(47, 47, 47, 1);
                font-family: PingFang SC;
                font-weight: 500;
            }
        }

        &_top {
            height: 72px;
            background: #ffffff;
            // margin-top: 0.5px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;

            &_left {
                height: 42px;
                width: 42px;
                border-radius: 50%;
                margin-left: 14px;
            }

            &_content {
                box-sizing: border-box;
                // height: 35px;
                flex: 1;
                margin-left: 15px;

                span {
                    font-size: 15px;
                    color: #2f2f2f;
                    font-family: PingFang SC;
                    font-weight: 500;
                    line-height: 18px;
                }

                &_con {
                    img {
                        height: 8px;
                        width: 5px;
                        margin-left: 5px;
                    }

                    span {
                        font-size: 10px;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #999999;
                    }
                }
            }

            &_right {
                height: 32px;
                width: 80px;
                border-radius: 32px;
                border: 1px solid #FF4F11;
                color: #FF4F11;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 14px;

                span {
                    font-size: 12px;
                    font-weight: 500;
                }
            }
        }

        &_top::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 12px;
            width: 351px;
            height: 0.5px;
            background: rgba(243, 243, 243, 1);
        }

        .orderInfo {
            width: 100%;
            padding: 12px 14px;
            background: #ffffff;
            // margin-top: 0.3px;
            .box {
                padding: 12px 13px 12px 13px;
                background: rgba(248, 248, 248, 1);
                border-radius: 2px;
                display: flex;
                justify-content: space-between;

                .left {
                    width: 90px;
                    margin-right: 15px;
                    height: 75px;
                    overflow: hidden;

                    .van-image__img {
                        width: 75px;
                        height: 75px;
                        display: block;
                        border-radius: 4px;
                    }
                }

                .right {
                    width: 230px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    .info {
                        width: 230px;
                        // height: 36px;
                        font-size: 13px;
                        font-family: PingFang SC;
                        font-weight: 600;
                        color: rgba(47, 47, 47, 1);
                        line-height: 18px;
                        -webkit-line-clamp: 2; /*用来限制在一个块元素显示的文本的行数*/
                        display: -webkit-box; /*必须结合的属性，将对象作为弹性伸缩盒子模型显示*/
                        -webkit-box-orient: vertical; /*必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式*/
                        overflow: hidden; /*必要*/
                    }

                    .desc {
                        font-size: 10px;
                        color: #999999;
                    }

                    .pirce {
                        font-size: 11px;

                        .money {
                            font-size: 15px;
                            margin-right: 8px;
                            margin-left: 2px;
                            font-weight: 600;
                        }
                    }
                }
            }

            .explain {
                margin-top: 14px;
                position: relative;

                .title {
                    font-size: 14px;
                    font-weight: 600;
                    margin-bottom: 6px;
                }

                .content {
                    font-size: 12px;
                    color: #999999;
                    -webkit-line-clamp: 2; /*用来限制在一个块元素显示的文本的行数*/
                    display: -webkit-box; /*必须结合的属性，将对象作为弹性伸缩盒子模型显示*/
                    -webkit-box-orient: vertical; /*必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式*/
                    overflow: hidden; /*必要*/

                    .infoo {
                        // overflow: hidden;
                        white-space:  pre-wrap !important;
                        line-height: 16px;
                    }

                    .infoo_img {
                        margin-top: 10px;
                        width: 110px;
                        height: 110px;
                        margin-right: 8px;
                        border-radius: 6px;
                    }

                    .infoo_img:nth-last-child(1) {
                        margin: 0;
                    }

                    .picture {
                        width: 110px;
                        position: relative;
                        // transition: all 0.3s;
                    }
                }

                .conten {
                    font-size: 12px;
                    color: #999999;
                    overflow: hidden; /*必要*/
                    white-space:  pre-wrap;

                    .infoo_img {
                        width: 110px;
                        height: 110px;
                        margin-right: 8px;
                        border-radius: 6px;
                    }

                    .infoo_img:nth-last-child(1) {
                        margin: 0;
                    }

                    .picture {
                        margin-top: 10px;
                        // transition: all 0.3s;
                        position: relative;
                    }
                }

                .infoo {
                    // overflow: hidden;
                    white-space:  pre-wrap;
                    line-height: 16px;
                }

                .more {
                    font-size: 12px;
                    color: #ff4f11;
                    text-align: center;
                    margin-top: 8px;
                    background: #FFFFFF;
                    position: relative;
                    z-index: 3;

                    img {
                        width: 8px;
                        margin-left: 2px;
                        transition: all 0.3s;
                    }

                    .rote {
                        transform: rotate(180deg);
                        transform-origin: center center;
                    }
                }
            }
        }

        .cardClose {
            margin-top: 10px;

            .title {
                height: 50px;
                width: 100%;
                font-size: 14px;
                font-weight: 600;
                display: flex;
                align-items: center;
                background: #ffffff;
                padding: 0 14px;
                display: flex;
                justify-content: space-between;

                .copyBtn {
                    font-size: 12px;
                    font-weight: 500;
                    color: #2f2f2f !important;
                    height: 30px;
                    width: 94px;
                    padding: 0 !important;
                    border-radius: 23px;
                }
            }

            // .center {
            // 	// margin-top: 0.5px;
            // }
        }

        .orderNum {
            margin-top: 10px;

            .title {
                height: 38px;
                width: 100%;
                font-size: 14px;
                font-weight: 500;
                display: flex;
                align-items: center;
                background: #ffffff;
                padding-left: 14px;
            }

            ul {
                background: #ffffff;
                padding: 10px 0;

                li {
                    padding: 0 14px;
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 10px;
                    font-size: 12px;

                    .left {
                        color: #999999;
                    }

                    .right {
                        color: #2f2f2f;
                        font-weight: 400;
                        letter-spacing: 0.5px
                    }
                }
            }
        }

        .service_center {
            height: 318px;
            width: 309px;

            img {
                height: 78px;
            }

            .customer {
                height: 79px;
                display: flex;
                align-items: center;
                margin: 0 20px;
                justify-content: space-between;

                p {
                    font-size: 15px;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: rgba(47, 47, 47, 1);
                    display: flex;
                    flex-direction: column;
                    line-height: 25px;

                    .public {
                        color: #999999;
                        font-size: 12px;
                        font-weight: 400;

                        i {
                            color: #363636;
                            font-style: normal;
                            font-weight: 500;
                        }
                    }
                }

                .consult {
                    height: 30px;
                    width: 78px;
                    border-radius: 16px;
                    background: #ffdd07;
                    font-weight: 500;
                    color: #2f2f2f;
                    font-size: 12px;
                    line-height: 30px;
                    text-align: center;
                }
            }

            .center {
                height: 79px;
                display: flex;
                align-items: center;
                margin: 0 20px;
                justify-content: space-between;
                border-top: 0.5px solid #f3f3f3;
                font-weight: normal;

                p {
                    font-size: 15px;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: rgba(47, 47, 47, 1);
                    display: flex;
                    flex-direction: column;
                    line-height: 25px;

                    .public {
                        color: #999999;
                        font-size: 12px;
                        font-weight: 400;
                    }
                }

                img {
                    height: 10px;
                    width: 5px;
                }
            }
        }

        .seller {
            height: 210px;
            width: 285px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;

            i {
                font-style: normal;
                color: #FF4F11;
            }

            p:nth-child(1) {
                font-size: 17px;
                font-family: PingFang SC;
                font-weight: 500;
                color: rgba(47, 47, 47, 1);
                text-align: center;

            }

            p:nth-child(2) {
                width: 236px;
                height: 60px;
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 400;
                color: rgba(102, 102, 102, 1);
                line-height: 20px;
            }

            .button {
                height: 46px;
                width: 240px;
                background: #FFDD07;
                color: #2F2F2F;
                font-size: 14px;
                font-weight: 400;
                line-height: 46px;
                text-align: center;
                border-radius: 23px;
            }
        }
    }
</style>
